<script type="text/x-template" id="ck-editor-template">
<div>
    <textarea ref="editor"></textarea>
</div>
</script>

<script>
    var pasterMgr = new WordPasterManager();//注意：此变量必须设为全局变量

    Vue.component('ck-editor', {
        template: '#ck-editor-template',
        props: {
            value: {
                type: String,
                default: ''
            },
            tag: {
                type: [String,Number],
                default: ''
            }
        },
        data: function (){
            return {
                id: '',
                editor: null,
                enableUpdate: true
            }
        },
        methods: {
            init: function (){
                var self = this;

                var id = this.$refs.editor.id = 'CKEditor-' + Math.random().toString().substr(2);
                this.id = id;
                pasterMgr.Config["PostUrl"] = "http://www.ncmem.com/cloud/qiniu/post_ori.aspx";
                pasterMgr.Load();//加载控件

                this.$nextTick(() => {

                    CKEDITOR.config.extraPlugins = 'imagepaster,netpaster';
                    self.editor = CKEDITOR.replace(id, {
                        language: 'zh-cn',
                        filebrowserUploadUrl: 'http://sample.com/upload?timestamp='+Date.now(), // 没啥用
                        fileTools_requestHeaders: {}, // 然并卵
                        tokenHandler: function (file, next) {
                            ajax({
                                uri: '/alioss/get_policy',
                                data: {type: 'image'},
                                success: function (resp) {
                                    const data = resp.data;
                                    next({
                                        OSSAccessKeyId: data.accessid,
                                        policy: data.policy,
                                        signature: data.signature,
                                        host: data.host,
                                        dir: data.dir,
                                        dns: data.dns
                                    })
                                }
                            });
                        }
                    });
                    self.editor.config.font_names += '宋体/SimSun;新宋体/NSimSun;仿宋/FangSong;楷体/KaiTi;黑体/SimHei;微软雅黑/Microsoft YaHei;';

                    self.editor.on('fileUploadRequest', evt => {
//                        evt.editor.config.fileTools_requestHeaders.token = getToken(); // 废弃的
                    });

                    self.editor.on('change', function (e) {
                        self.input();
                    });
                    self.editor.on('blur', function (e) {
                        self.input();
                    });
                    self.editor.on('fileUploadResponse', function (e) {
                        setTimeout(self.input, 500)
                    });

                    self.setContent();
                });
            },
            getEditor: function (){
                return this.editor
            },
            setContent: function (){
                this.getEditor().setData(this.value)
            },
            input: function (){
                const html = this.editor.getData();
                this.$emit('input', html)
            },
            imageSuccessCBK: function (arr){
                console.log(arr)
            }
        },
        mounted: function (){
            this.init()
        },
        watch: {
            tag: function (nv, ov) {
                console.log(nv,ov);
                this.setContent();
            }
        }
    })
</script>